<script lang="ts" setup>
import { reactive,ref, onMounted } from 'vue'
import { NCard, NTransfer, NButton, NSpace } from 'naive-ui'
import type { TransferOption } from 'naive-ui'
import http from '@/tools/http'

const props = defineProps(["value"])
const emits = defineEmits(["update:value", "cancel"])

const roleList = reactive<TransferOption[]>([])
const selectedRole = ref<string[]>([])

onMounted(() => {
    for (let i = 0; i < props.value.length; i++) {
        selectedRole.value.push(props.value[i])
    }
    getRoleList()
})

function submit() {
    emits("update:value", selectedRole.value)
    emits("cancel")
}

function getRoleList() {
    const request:string[] = []
    http.post("/id/role/list", request).then(({ data }) => {
        if (data.code === "0") {
            roleList.length = 0
            for (let i = 0; i < data.data.length; i++) {
                roleList.push({
                    label: data.data[i].roleName,
                    value: data.data[i].roleCode
                })
            }
        }
    })
}
</script>
<template>
    <n-card title="角色选择" style="width:550px;height:450px;" :header-style="{ padding: '12px 24px' }" closable
        @close="emits('cancel')">
        <n-transfer v-model:value="selectedRole" :options="roleList" source-title="待选角色" target-title="已选角色" />
        <template #footer>
            <n-space justify="end">
                <n-button @click="emits('cancel')">取消</n-button>
                <n-button @click="submit" type="primary">确定</n-button>
            </n-space>
        </template>
    </n-card>
</template>
<style scoped></style>